Simple Slideshows
A slideshow allows for transitioning between graphics to display those within a collection with controls for the location within the set through forward and backward arrows or position indicators. This is commonly used for presentations and can help with compact formatting to reduce the space occupied by similar or related graphics. Although usually used for images or videos, these graphics may include any elements which are designed to rotate in a carousel. It can also be useful to have multiple slideshows for display on a single webpage, as well as generalizing the implementation for each slideshow to operate independently without specific configuration (most other examples only allow for a single slideshow or are specifically set for multiple slideshows with direct dependence on the arrangement).
Basic Program Design
The presented slideshow is encompassed within an independent section with containers manually created for each slide displayed within the slideshow. Typically, these slide will be populated with images or videos, but they can use any elements which are designed to rotate in a carousel. Several inline containers also need to be manually created and shown as dots to be used as position indicators corresponding to each slide. Arrows on either side are also included for navigation forward to the next slide and navigation backward to the previous slide. At a high-level, the script operates by marking the currently active slide and then changing the currently active slide each time an action is performed in the form of clicking on an arrow or dot. A simple fading animation is added for the transition through CSS.
<div class = "slideshow"> <div class = "slideshow-slide slideshow-fade"> <img class = "formula-image" src = "./Image 001.png"> </div> <div class = "slideshow-slide slideshow-fade"> <img class = "formula-image" src = "./Image 002.png"> </div> <div class = "slideshow-slide slideshow-fade"> <img class = "formula-image" src = "./Image 003.png"> </div> <a class = "slideshow-previous">❮</a> <a class = "slideshow-next">❯</a> <div class = "slideshow-indicators"> <span class = "slideshow-dot"></span> <span class = "slideshow-dot"></span> <span class = "slideshow-dot"></span> </div> </div>
(function() {
// Wrapped the code inside an immediately invoked function expression.
// Get all the slideshows on the webpage.
parents = document.getElementsByClassName("slideshow");
for (j = 0; j < parents.length; j++) {
// Get the slides and dots for the current slideshow.
var slides = parents[j].getElementsByClassName("slideshow-slide");
var dots = parents[j].getElementsByClassName("slideshow-dot");
// Mark the first slide and dot as currently active.
slides[0].classList.add("slideshow-current");
dots[0].classList.add("slideshow-active");
}
// Get the dots within each slideshow and add an onclick function.
dots = document.getElementsByClassName("slideshow-dot");
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
// When clicked, get the slides of the corresponding slideshow.
slides = this.parentNode.parentNode.getElementsByClassName("slideshow-slide");
// Loop through the each sibling of the dot and remove markings of currently active.
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove("slideshow-active");
slides[j].classList.remove("slideshow-current");
// Store the slide index of the clicked dot.
if (this.parentNode.children[j] == this) {
index = j;
}
}
// Mark the clicked slide and dot as currently active.
slides[index].classList.add("slideshow-current");
this.classList.add("slideshow-active");
}
}
// Get the arrow links within each slideshow and add an onclick function.
links = document.querySelectorAll(".slideshow a");
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
// When clicked, get the slides of the corresponding slideshow.
current = this.parentNode;
var slides = current.getElementsByClassName("slideshow-slide");
var dots = current.getElementsByClassName("slideshow-dot");
// Get the slide and dot of the current and remove markings of currently active.
slide_current = current.getElementsByClassName("slideshow-current")[0];
dot_current = current.getElementsByClassName("slideshow-active")[0];
slide_current.classList.remove("slideshow-current");
dot_current.classList.remove("slideshow-active");
// Transition to the next slide if the next arrow is pressed.
if (this.className == "slideshow-next") {
// Check if the current slide has a next sibling.
if (slide_current.nextElementSibling.classList.contains("slideshow-slide")) {
// Mark the next slide and dot as currently active.
slide_current.nextElementSibling.classList.add("slideshow-current");
dot_current.nextElementSibling.classList.add("slideshow-active");
} else {
// Overflow around to mark the first slide as currently active.
slides[0].classList.add("slideshow-current");
dots[0].classList.add("slideshow-active");
}
}
// Transition to the previous slide if the previous arrow is pressed.
if (this.className == "slideshow-previous") {
// Check if the current slide has a previous sibling.
if (slide_current.previousElementSibling) {
// Mark the previous slide and dot as currently active.
slide_current.previousElementSibling.classList.add("slideshow-current");
dot_current.previousElementSibling.classList.add("slideshow-active");
} else {
// Overflow around to mark the last slide as currently active.
slides[slides.length - 1].classList.add("slideshow-current");
dots[slides.length - 1].classList.add("slideshow-active");
}
}
}
}
})();